<link rel="stylesheet" href="./UI.css">
<div id="root">
    <qf-nav-bar left-arrow @click-left="clickLeftFn" @click-right="clickRightFn" title="用户创建"></qf-nav-bar>

    <h1>用户创建</h1>
    <qf-table @submit="submitFn"> </qf-table>

    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>

    <h1>loading1组件</h1>
    <qf-loading1 :state="loading1State"></qf-loading1>
    <button @click="loading1State = true">显示loading</button>
    <button @click="loading1State = false">隐藏loading</button>

    <h1>loading2组件</h1>
   <qf-loading2 :state.sync="loading2State" ></qf-loading2>
    <button @click="loading2State = true">显示loading</button>


    <h1>dialog对话框</h1>
    <qf-dialog :visible.sync="dialogState" title="用户创建" content="请输入内容"></qf-dialog>
    <button @click="dialogState = true">显示对话框</button>


    <h1>分页组件page</h1>
    <qf-page :total="11" :page-size="2" @click-page="changePageFn"></qf-page>
</div>


<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="./UI.js"></script>

<script>
    const vm = new Vue({
        el: "#root",
        data: {
            loading1State: false,
            loading2State: false,
            dialogState: false,
        },
        methods: {
            changePageFn(pageNum) {
                console.log('你点击分页了：', pageNum)
            },
            clickLeftFn(){
                alert('clickLeft')
            },
            clickRightFn(){
                alert('clickRight')
            },
            submitFn(formData){
                console.log(formData)
                alert("用户创建。。。")
            }
        }
    })
</script>